    <template>
    <view class="app-order-banner order-status-box" :style="titleStyle">
        <view class='text cross-center' :class="refund ? 'dir-left-nowrap refund' : 'main-center'">
            <image v-if="confirm == 0 && !refund" src="/static/image/icon/status.png"></image>
            <image v-else-if="confirm == 1 && !refund" src="/static/image/icon/over.png"></image>
            <view>{{title}}</view>
        </view>
        <view v-if="hint" class='hint main-center cross-center'>{{hint}}</view>
    </view>
</template>
<script>
    import {mapState, mapGetters} from 'vuex';
    export default {
        name: 'app-order-banner',
        data() {
            return {
                newPicUrl: ''
            }
        },
        props: {
            title: {
                type: String,
                value: ''
            },
            confirm: {
                type: String,
                value: '0'
            },
            picUrl: {
                type: String,
                value: ''
            },
            hint: {
                type: String,
                value: ''
            },
            refund: Boolean
        },
        computed: {
            ...mapGetters('mallConfig', {
                getTheme: 'getTheme',
            }),
            titleStyle() {
                let style = ``;
                if (this.refund) {
                    style += `background-image: url(${this.newPicUrl});background-size: 100% 100%;height: 120rpx`
                }else {
                    style += `background: linear-gradient(to bottom, ${this.getTheme.background}, ${this.getTheme.background_t});padding-bottom: ${this.hint ? '202rpx': '276rpx'};height: 372rpx;`;
                }
                return style;
            },
        },
        created() {
            this.newPicUrl = this.$store.state.mallConfig.__wxapp_img.mall.order.status_bar;
        }
    }
</script>
<style scoped lang="scss">
    .order-status-box {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .text {
        z-index: 1;
        color: #fff;
        font-size: 32rpx;
        height: 32rpx;
        line-height: 32rpx;
        &.refund {
            padding-left: 80rpx;
        }
        image {
            width: 32rpx;
            height: 32rpx;
            margin-right: 16rpx;
        }
    }

    .hint {
        z-index: 1;
        margin-top: #{16rpx};
        color: #fff;
        font-size: 24rpx;
    }
</style>